CSS 優化

身為前端我們常會聽到 Clean Code 這個字眼，又或者是各種設計模式，但這些主要是針對 JavaScript 的內容，雖然也有人提到 CSS 的優化，但比較多是在閱讀優化的成分，例如說 BEM( Block Element Modifier)，原子化 CSS，但對於 CSS 的效能優化基本上沒有提到，今天讓我們來聊聊 CSS 的 Reflow 和 Repaint 吧。

雖然很難會真的感受到 CSS 爆掉

Reflow 重排

CSS Reflow 主要會發生在當頁面的布局結構發生變化時，瀏覽器需要重新計算元素的尺寸、幾何屬性，當頁面的布局十分複雜時重排的頻繁發生會導致性能下降，以下提出一些常見的策略防止重排

1. 合併 DOM 操作：當我們需要手動插入多個 DOM 時，盡量還是一次全部處理掉，也可以使用 DocumentFragment 來建立一個虛擬節點來將需要掛上真實 DOM 的節點先放在這邊，最後一並掛上去。
2. 避免逐項更新樣式：每當我們頁面內的元素寬高或是位置更改時，就會觸發一次重繪，因此若情況允許還是建議把需要一起更新的樣式同時更新。
3. 使用虛擬 DOM：這個現代開發者應該都很熟了，虛擬 DOM 一開始會誕生的其中一個原因就是因為想要避免頻繁的操作 DOM，會在一個適合的時間將更新一次放出，同理，這也能減少重排的消耗。

Repaint 重繪

重繪與重排類似，不過他主要是發生在不影響布局的屬性，像是陰影、顏色等等，我們一樣有些可以避免頻繁重繪的小技巧

1. 動畫重繪：當我們有一些頻繁重繪的元素時，可以將他們包到 Canvas 內，然後在每次的繪畫結束後再將他們一次放回去 Canvas 上
2. 使用 CSS 動畫而非 JavaScript：CSS 的動畫執行會獨立於 JavaScript 的主線程，可以有效避免程式執行卡頓，並且一些特殊屬性會透過 GPU 加速，例transform, opacity, filter 。

通用優化策略

我們應該注意 DOM 結構不應該套太深，以避免同時觸發過多的 CSS 重排效果，並且減少 CSS 表達式，如 calc() 之類的計算方式。